<template>
  <PageLayout 
    title="设置" 
    description="管理您的个人资料和应用偏好"
  >
    <!-- 设置内容区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- 个人资料设置 -->
      <div class="space-y-6">
        <div class="card">
          <h2 class="text-xl font-semibold text-text-primary mb-4">个人资料</h2>
          <ProfileEditForm />
        </div>
      </div>

      <!-- 应用设置 -->
      <div class="space-y-6">
        <div class="card">
          <h2 class="text-xl font-semibold text-text-primary mb-4">应用偏好</h2>
          <div class="space-y-6">
            <AiContentToggle />
            <PerformanceMonitorToggle />
          </div>
        </div>
        
        <!-- 消息设置 -->
        <div class="card">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold text-text-primary">消息通知</h2>
            <UiButton
              variant="secondary"
              size="sm"
              @click="$router.push('/messages')"
            >
              管理消息
            </UiButton>
          </div>
          <p class="text-text-secondary text-sm mb-4">
            管理你接收的消息通知类型和偏好设置
          </p>
          <div class="flex items-center gap-2 text-sm text-text-muted">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
            <span>点击"管理消息"查看详细设置</span>
          </div>
        </div>
      </div>
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import PageLayout from '../components/layout/PageLayout.vue'
import ProfileEditForm from '../components/user/ProfileEditForm.vue'
import AiContentToggle from '../components/user/AiContentToggle.vue'
import PerformanceMonitorToggle from '../components/user/PerformanceMonitorToggle.vue'
import { UiButton } from '../components/ui'
</script>